<!--
    省市区级联选择器
    多绑定值，仅支持单选
    v-model:modelValue // 默认绑定值【最低级的选项】code
    v-model:province // 省级code
    v-model:provinceName // 省级名称
    v-model:city // 市级code
    v-model:cityName // 市级名称
    v-model:area // 区级code
    v-model:areaName // 区级名称
-->
<template>
    <items :label="label" :label-width="labelWidth" :help="help" :required="required">
        <el-cascader 
            v-model="value" 
            :options="citys" 
            @change="handleChange" />
    </items>
</template>

<script>
import items from '@/components/form/item.vue'
export default {
    emit: ["update:modelValue","update:province","update:provinceName","update:city","update:cityName","update:area","update:areaName"],
    props: {
        // 标签名称
        label: {
            type: String,
            default: ''
        },
        // 标签宽度
        labelWidth: {
            type: String,
            default: '120px'
        },
        // 帮助信息，显示在左侧label旁边出现一个帮助图标
        help: {
            type: String,
            default: ''
        },
        // 是否显示必填的红色星号*
        required: {
            type: Boolean,
            default: false
        },

        // 绑定值信息
        // 默认绑定值
        modelValue: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
        // 省级code
        province: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
        // 省级名称
        provinceName: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
        // 市级code
        city: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
        // 市级名称
        cityName: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
        // 区级code
        area: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
        // 区级名称
        areaName: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
    },
    data() {
        return {
            value: [],
            citys: {},
            d_province: "",// 省级code
            d_provinceName: "",// 省级名称
            d_city: "",// 市级code
            d_cityName: "",// 市级名称
            d_area: "",// 区级code
            d_areaName: "",// 区级名称
        }
    },
    methods: {
        // 省市区提取
        handleChange(){
            console.log("aaaa",this.value)
            if(this.value.length >= 1){
                this.d_province = this.value[0];
                this.$emit("update:province", this.d_province);
                this.$emit("update:modelValue", this.d_province)
            }
            if(this.value.length >= 2){
                this.d_city = this.value[1];
                this.$emit("update:city", this.d_city);
                this.$emit("update:modelValue", this.d_city)
            }
            if(this.value.length >= 3){
                this.d_area = this.value[2];
                this.$emit("update:area", this.d_area);
                this.$emit("update:modelValue", this.d_area)
            }
            // 省名称、市名称、区名称获取
            for(var i in this.citys){
                if(this.citys[i].value == this.d_province){
                    this.d_provinceName = this.citys[i].label;
                    this.$emit("update:provinceName", this.d_provinceName);
                    for(var j in this.citys[i].children){
                        if(this.citys[i].children[j].value == this.d_city){
                            this.d_cityName = this.citys[i].children[j].label;
                            this.$emit("update:cityName", this.d_cityName);
                            for(var k in this.citys[i].children[j].children){
                                if(this.citys[i].children[j].children[k].value == this.d_area){
                                    this.d_areaName = this.citys[i].children[j].children[k].label;
                                    this.$emit("update:areaName", this.d_areaName);
                                    break
                                }
                            }
                            break
                        }
                    }
                    break
                }
            }
        },
        // 省市区初始化
        cityInit(){
            if(this.province){
                return 
            }
            if(this.modelValue){
                // 设置省市区信息
                this.value = []
                if(this.modelValue % 10000 == 0){
                    this.value.push(this.modelValue+'')
                } else if(this.modelValue % 100 == 0){
                    this.value.push(parseInt(this.modelValue/10000)*10000 + '')
                    this.value.push(this.modelValue+'')
                } else {
                    this.value.push(parseInt(this.modelValue/10000)*10000 + '')
                    this.value.push(parseInt(this.modelValue/100)*100 + '')
                    this.value.push(this.modelValue+'')
                }
                this.handleChange()
            } else {
                if(this.province){
                    this.value.push(this.province+'')
                }
                if(this.city){
                    this.value.push(this.city+'')
                }
                if(this.area){
                    this.value.push(this.area+'')
                }
                this.handleChange()
            }
        },
    },
    created() {
        if(Object.keys(this.citys).length == 0){
            // 暂未初始化省市区列表
            // 从本地location中获取省市区信息
            let citys = JSON.parse(localStorage.getItem("citys"));
            if(citys){
                this.citys = citys
            } else {
                // 从接口中获取省市区信息
                var that = this;
                that.$http.get("/system/configure/city").then(res=>{
                    that.citys = res.data;
                    localStorage.setItem("citys", JSON.stringify(res.data));
                })
            }
        }
        this.cityInit()
    },
    watch: {
        modelValue(){
            this.cityInit()
        },
        province(){
            this.cityInit()
        },
        city(){
            this.cityInit()
        },
        area(){
            this.cityInit()
        },
    },
    components: {
        items,
    },
}
</script>